<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>

	</head>

	<body>
		<canvas id="canvas" width="300" height="300"></canvas>
		<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;background:#ffffff;"></canvas>
		
		<script>
			var c = document.getElementById("myCanvas");
			var ctx = c.getContext("2d");
//			var img = document.getElementById("tulip");
			var img = new Image();
			img.src = "../css3-image-stack-elasticity/img/1.png";
			img.onload = function () {
				ctx.drawImage(img, 0, 0);
				var myImageData = ctx.getImageData('0', '0', '100', '100');
//				console.log(myImageData.data.length)	
				
				var can = document.getElementById('canvas');
				var ct = can.getContext('2d');
				ct.translate((myImageData.width * 0.5), (myImageData.height * 0.5))
				
				
				
				da(myImageData.data, 0.3);//处理像素
				ct.putImageData(myImageData,0,0);//渲染
				
				
			}	
			var wid = 50;
			var hei = 50;
			//遍历数据将固定点的透明的设为0； time0到1的进度
			function da(data, time) {
				console.log(data.length);
				//判断时间进度
				if (time < 0.5) {//千半段
					for (var i = -1; i < data.length ; i += 4) {
//						data[i] = 0
						var inde = (i + 1) / 4;
//						console.log(inde)
						
						
						
					}
				} else{
					
				}
				
				
//				for (var i = -1; i < data.length ; i += 4) {
//					data[i] = 0.5 * 255
//					var inde = (i + 1) / 4;
//					console.log(inde)
//					
//					
//					
//				}
			}
		</script>

	</body>

</html>